<!--suppress ALL -->
<include file="./Template/header.html" />

<link rel="stylesheet" type="text/css" href="/Template/css/otherOrder.css">
<script type="text/javascript" src="/Template/js/amazeui.js"></script>
<script type="text/javascript">

	$(function() {

		//初始化页面配置
		initPage("别人在团", "order");

		var app = new Vue({
			el: '#container',
			data: {
				orderList: [],
			},
			methods: {
				index: indexPage,
				order: orderPage,
				rank: rankPage,
				center: centerPage,
				endOrder: function() {
					window.location.href = "/wechat/order/endOrder";
				},
				jump: function(url) {
					window.location.href = url;
				},
			}
		})

		$('.am-slider').flexslider({
			animationLoop: false,
		});

		var pageNum = 2;
		var isNeedRefresh = false;

		$(window).scroll(function(){
			var scrollTop = $(this).scrollTop();
			var scrollHeight = $(document).height();
			var windowHeight = $(this).height();
			if(!isNeedRefresh &&
					(scrollHeight - scrollTop - windowHeight <= 25)){
				isNeedRefresh = true;
				refreshPage(pageNum++);
			}
		});

		var demo = document.getElementById("demo");
		var demo1 = document.getElementById("demo1");
		var demo2 = document.getElementById("demo2");
		$('#demo1 ul li').each(function(){
			$(this).css('min-width',screen.width);
		})
		demo2.innerHTML=document.getElementById("demo1").innerHTML;
		function Marquee(){
			if(demo.scrollLeft-demo2.offsetWidth>=0){
				demo.scrollLeft-=demo1.offsetWidth;
			}
			else{
				demo.scrollLeft++;
			}
		}
		var myvar=setInterval(Marquee,30);

		function refreshPage(pageNum) {
			$.ajax({
				url:"/wechat/order/otherOrderList",
				type:"post",
				data:{
					pageNum:pageNum,
				},
				dataType:"JSON",
				beforeSend:function(){
					$("#loadingToast").show();
				},
				complete:function(){
					$('#loadingToast').hide();
				},
				success:function(data){
					if(!isNullOrEmpty(data)) {
						app.orderList = app.orderList.concat(data);
						isNeedRefresh = false;
						setTimeout(bindCountDown, 200);
						setTimeout(bindProgress, 200);
					}
				},
			})
		}

		$.ajax({
			url:"/wechat/order/otherOrderList",
			type:"post",
			data:{
				pageNum:1,
			},
			dataType:"JSON",
			beforeSend:function(){
				$("#loadingToast").show();
			},
			complete:function(){
				$('#loadingToast').hide();
			},
			success:function(data){
				app.orderList = data;
				setTimeout(bindCountDown, 200);
				setTimeout(bindProgress, 200);
			},
		})

		pageNum++;

		function countDown(obj) {

			setInterval(function() {

				//var endTime = new Date(obj.attr("endtime").replace(/-/g,"/"));
				var ua = navigator.userAgent.toLowerCase();	
				if (/iphone|ipad|ipod/.test(ua)) {
					var endTime = safariDate(obj.attr("endtime"));	
				} else if (/android/.test(ua)) {
					var endTime = new Date(obj.attr("endtime").replace(/-/g,","));		
				}
				var timeGap = getTimeGap(new Date(), endTime, "hours");
				var content = timeGap["hours"] + ":" + timeGap["minutes"] + ":" + timeGap["seconds"];
				if (timeGap["hours"] == undefined || timeGap["minutes"] == undefined || timeGap["seconds"] == undefined) {
					obj.html("00:00:00");
				}else{
					obj.html(content);
				}

			}, 1000);

		}

		function bindProgress() {

			$(".other-info-padding-right").each(function() {

				$(this).attr("progress", 1);

	            var total = $(this).attr("total");
				var join = $(this).attr("join");
	            
	            var proportion = parseFloat(join/total);
                var progressImg = $(this).children('.progress-img').width();
                var progressImgRed = $(this).children('.progress-img-red').width(progressImg*proportion);
                $(this).children('.progress-img-red').css('width',progressImgRed);
	        })
        }


		function bindCountDown() {
			$(".deadtime[status=0]").each(function() {
				$(this).attr("status", 1);
				countDown($(this));
				bindProgress();
			});
		}

	});

	function join(id) {
		window.location.href = "/wechat/product/share/id/" + id;
	}

	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId: '{$appid}', // 必填，公众号的唯一标识
		timestamp: '{$signature.timestamp}', // 必填，生成签名的时间戳
		nonceStr: '{$signature.noncestr}', // 必填，生成签名的随机串
		signature: '{$signature.signature}', // 必填，签名，见附录1
		jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});

	wx.ready(function(){

		var shareData = {
			imgUrl    :    'http://resource.91memo.cn/image/4ff324e0fe3b652b3fd28da21eaa2578.png',
			link     :     '{$shareUrl}',
			title     :    'word哥，这里快打起来了！',
			desc     :     '有便宜不占王八蛋，快来占便宜！'
		};

		wx.onMenuShareAppMessage(shareData);
		wx.onMenuShareTimeline(shareData);
	});

</script>
<div class="index">
	<div class="nav-img">
		<div class="am-slider am-slider-default" id="demo-slider-0">
			<ul class="am-slides nav-img-ul">
				<foreach name="bannerList" item="vo">
					<li v-on:click="jump('{$vo.target_url}')">
						<img src="{$vo.image_url}">
					</li>
				</foreach>
			</ul>
		</div>
		<div class="user-pay">
			<div class="user-pay-content">
				<div class="user-img"></div>
				<div class="user-name"></div>
				<div class="pay-text">刚刚下单</div>
				<p class="pay-time"></p>
			</div>
		</div>
	</div>
	<div id="demo" class="qimo8">
		<div class="qimo">
		    <div id="demo1">
		        <ul>
					<foreach name="announcementList" item="vo">
						<li>
							<a href="javascript:void(0)">{$vo.content}</a>
						</li>
					</foreach>
			    </ul>
		    </div>
		    <div id="demo2"></div>
	    </div>
	</div>
	<div class="no-team-data" v-if="orderList == null">
		暂无别人的团<a href="/wechat/product/index">去开团</a>
	</div>
	<div class="team">
		<div class="team-list">
			<div class="header-info" v-for="order in orderList" onclick="join('{{order.group_id}}')">
				<div class="head-img-url-zone">
					<div class="head-img-url" v-bind:class="{leader:member.is_leader == 1}" v-for="member in order.member_list" style="background:url('{{member.headimgurl}}')no-repeat center;background-size: cover;"></div>
				</div>
				<div class="other-info" progress="0" total="{{order.price}}" join="{{order.join_number}}">
					<div class="other-info-padding-left">
						<div class="the-goods-title">{{order.product_name}}</div>
						<p class="join-name"><span>{{order.nickname}}</span>的团</p>
						<p class="join-num">目前团员人数 <span>{{order.member_number}}人</span></p>
						<p class="join-count">全团持劵 <span>{{order.buy_number}}份</span></p>
						<div class="join-team-btn">
						<p>加入此团</p>
					</div>
					</div>
					<div class="other-info-padding-right" progress="0" total="{{order.price}}" join="{{order.join_number}}">
						<div class="the-goods-img" style="background:url('{{order.image}}')no-repeat center;background-size: 100% 6.5rem;"></div>
						<div class="deadtime" endtime="{{order.end_time}}" status="0">倒计时：<span class="countDown">正在计算</span></div>
						<div class="progress-img"></div>
						<div class="progress-img-red"></div>
						<div class="open-progress">还差{{order.price-order.join_number}}</div>
						<div class="leftperson">总价{{order.price}}</div>
					</div>
				</div>
			</div>
		</div>
	</div>
<!-- <div class="my-order">
	<div class="choose-header">
		<div class="choose-order-type">
			<div class="now active"><span>进行中</span></div>
			<div class="complete" v-on:click="endOrder"><span>已完成</span></div>
		</div>
	</div>
	<div class="has-no-order" v-if="orderList == null">暂无订单</div>
	<div class="my-order-list" v-for="order in orderList">
		<div class="my-order-bingo">
			<div class="header-name color-99">团长：{{order.group_name}}</div>
			<div class="progress color-99" v-if="(order.status == 2)">
				进度：<span>{{order.progress}}%</span> | 剩余 <span class="countDown" endtime="{{order.end_time}}" status="0">正在计算</span>
			</div>
			<div class="progress color-99" v-if="(order.status == 3)">
				<span>等待派奖</span>
			</div>
			<div class="goods">
				<div class="goods-img" style="background: url('{{order.image}}')no-repeat center;background-size: cover;"></div>
				<div class="goods-info">
					<p class="title color-font">{{order.product_name}}</p>
					<p class="time color-99">下单时间：{{order.create_time}}</p>
					<p class="price color-99">总价：￥{{order.price}}</p>
				</div>
				<div class="my-pay-price color-font">￥{{order.number}}</div>
				<div class="my-pay-num color-99">{{order.number}}份</div>
			</div>
			<div class="bingo-btn" v-if="(order.winner_customer_id == order.customer_id && order.status == 3)">
				<p>恭喜在本轮中奖</p>
			</div>
		</div>
	</div>
</div> -->

<include file="./Template/footer.html" />